<style scoped>
.tabbarMain-out {
  border-top: 1px solid #f2f2f2;
}
.tabbarMain {
  /* border-top: 1px solid #f2f2f2; */
  /* background: rgba(255, 255, 255, 1); */
  background-color: #fff;
  height: 156upx;
  position: fixed;
  z-index: 50;
  width: 100%;
  flex: 1;
  bottom: 0;
}

.tabbarMainIphone {
  height: 256upx;
  padding-bottom: 64upx;
}

.tabBtnMina {
  width: 750upx;
  height: 88upx;
  position: absolute;
  z-index: 2;
  top: 16rpx;
  flex-direction: row;
  /* #ifndef */
  padding-bottom: constant(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-top);
  /* #endif */
  display: flex;
}

.tabBtnMinaIphone {
  height: 156upx;
  padding-bottom: 64upx;
}

.imgse {
  width: 50upx;
  height: 50upx;
}

.txtBtn {
  font-size: 24upx;
  color: #666666;
}

.txtBtnSel {
  font-size: 24upx;
  color: #5cc39d;
}

.itmMain {
  /* width: 250upx; */
  /* width: 150upx; */
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.imgseTs {
  width: 150upx;
  height: 140upx;
  margin-bottom: 90upx;
  position: relative;
  z-index: 1;
  bottom: 0upx;
}

.btnfixMin {
  width: 750upx;
  height: 178upx;
  position: absolute;
  z-index: 1;
  bottom: 0;
}

.btnfixMinIphone {
  bottom: 64upx;
}

.fixTpm {
  width: 150upx;
  height: 140upx;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 0;
}

.imgseTsAnds {
  width: 150upx;
  height: 150upx;
  position: fixed;
  z-index: 1;
  bottom: 10upx;
  left: 50%;
  border-radius: 150upx;
  transform: translateX(-50%);
}
</style>

<template>
  <view
    class="tabbarMain tabbarMain-out"
    :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
  >
    <view
      class="tabBtnMina"
      :class="[flagTypeInfo ? 'tabBtnMinaIphone' : '']"
      mode=""
    >
      <view class="itmMain" @click.stop="switchTabFunc(0)">
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != 0"
          :src="require('@/static/user/tab-icon3.png')"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === 0"
          :src="require('@/static/user/tab-icon33.png')"
        ></image>
        <text class="txtBtn" :class="{ txtBtnSel: active == 0 }">首页</text>
      </view>
      <!-- <view
        class="itmMain"
        @click.stop="switchTabFunc(1)"
        v-if="appCodeList.includes('FOOD') || !appCodeList.length"
      >
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != 1"
          :src="require('@/static/user/food-icon.png')"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === 1"
          :src="require('@/static/user/food-icona.png')"
        ></image>
        <text class="txtBtn" :class="{ txtBtnSel: active == 1 }">点餐</text>
      </view> -->
      <view
        class="itmMain"
        @click.stop="switchTabFunc(2)"
        v-if="appCodeList.includes('TICKET') || !appCodeList.length"
      >
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != 2"
          :src="require('@/static/user/tab-icon1.png')"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === 2"
          :src="require('@/static/user/tab-icon11.png')"
        ></image>
        <text class="txtBtn" :class="{ txtBtnSel: active == 2 }">购票</text>
      </view>
      <view class="itmMain" @click.stop="switchTabFunc(3)">
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != 3"
          :src="require('@/static/user/tab-icon4.png')"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === 3"
          :src="require('@/static/user/tab-icon44.png')"
        ></image>
        <text class="txtBtn" :class="{ txtBtnSel: active == 3 }">订单</text>
      </view>
      <view class="itmMain" @click.stop="switchTabFunc(4)">
        <image
          class="imgse"
          :fade-show="false"
          v-if="active != 4"
          :src="require('@/static/user/tab-icon2.png')"
        ></image>
        <image
          class="imgse"
          :fade-show="false"
          v-if="active === 4"
          :src="require('@/static/user/tab-icon22.png')"
        ></image>
        <text class="txtBtn" :class="{ txtBtnSel: active == 4 }">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flagTypeInfo: false, // 检测当前是否是IPHONE 异形屏幕
    };
  },
  mounted() {
    this.flagTypeInfo = this.$is_bang;
  },
  props: {
    active: {
      type: Number,
      default: 0,
    },
    appCodeList: {
      type: Array,
      default: ["FOOD", "TICKET"],
    },
  },
  methods: {
    switchTabFunc(index) {
      if (index === 1) {
        return uni.navigateTo({
          url: "/pages/foodPage/list",
        });
      }
      console.log(index);
      uni.setStorageSync("activeTab", index);
      this.$emit("change", index);
    },
  },
};
</script>
